<template>
  <div class="article" v-if="channel !== ''">
    <el-card>
      <topcard>编辑文章</topcard>
      <el-form
        class="body"
        :model="form"
        label-width="80px"
        ref="form"
        :rules="rules"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <quillEditor
            class="editor"
            v-model="form.content"
            @change="editorChange"
            :options="editorOption"
          ></quillEditor>
        </el-form-item>
        <el-form-item label="封面" prop="cover.type">
          <el-radio-group v-model="form.cover.type">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- upload组件 -->
        <el-form-item prop="cover.images">
          <template v-if="form.cover.type === 1">
            <div class="avatar-uploader" @click="uploading">
              <img src="" alt="" />
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </template>
          <template v-else-if="form.cover.type === 3">
            <div class="avatar-uploader" @click="uploading">
              <img src="" alt="" />
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
            <div class="avatar-uploader" @click="uploading">
              <img src="" alt="" />
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
            <div class="avatar-uploader" @click="uploading">
              <img src="" alt="" />
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </template>
          <template v-else> </template>
        </el-form-item>
        <el-form-item label="频道" prop="channel_id">
          <el-select v-model="form.channel_id" placeholder="请选择频道">
            <el-option
              v-for="(item, index) in channel"
              :key="index"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button ref="primary" type="primary" @click="edit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <upload ref="upload"></upload>
  </div>
</template>
<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import upload from './upload.vue'
// api接口
import { getChannel, getArticle, editArticle } from '@/api/sendArticle.js'
export default {
  components: {
    quillEditor,
    upload
  },
  data () {
    return {
      article: '',
      channel: '',
      draft: false,
      form: {
        // 标题
        title: '',
        // 内容区域
        content: '',
        // 图片
        cover: { type: 0, images: [] },
        // 频道标记id
        channel_id: ''
      },
      rules: {
        title: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 5, max: 30, message: '输入5-30个文本', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 20, message: '至少输入20个文本', trigger: 'blur' }
        ]
      },
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      }
    }
  },
  created () {
    // 获取单个文章信息
    // window.console.log('path', this.$route.params)
    getArticle(this.$route.params).then(res => {
      window.console.log('获取单个文章', res)
      this.form = res.data
    })
    // 发表文章或者编辑文章
    getChannel().then(res => {
      window.console.log(res)
      this.channel = res.data.channels
    })
  },
  methods: {
    editorChange (val) {
      // window.console.log(val)
      this.$refs.form.validateField(['content'])
    },
    // 点击上传框弹出弹出层
    uploading () {
      this.$refs.upload.dialogVisible = true
    },
    // 表单验证编辑文章
    edit () {
      this.$refs.form.validate().then(val => {
        if (val) {
          editArticle({
            channel_id: this.$route.params,
            draft: this.draft,
            ...this.form
          }).then(res => {
            window.console.log(res)
            this.$message.success('编辑成功')
            this.$refs.form.resetFields()
            this.$router.push('/content')
          })
        } else {
          this.$message.error('编辑失败')
        }
      })
    }
  }
}
</script>
<style lang="less">
.article {
  // height: 95%;
  .body {
    padding-top: 20px;
  }
  .editor {
    .ql-toolbar.ql-snow {
      padding: 0 8px;
    }

    .ql-container.ql-snow {
      min-height: 300px;
    }
  }
  .el-form-item__content {
    .avatar-uploader {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      // cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 178px;
      height: 178px;
      display: inline-block;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
  }
}
</style>
